<template>
  <div class="main-body">
    <comm-header title="朋友圈"></comm-header>
    <div class="circle-box">
      <div class="comm-row-s dis">
        <div class="title title-s">文章详情</div>
        <el-input type="textarea" v-model="addForm.text" class="details" placeholder="请输入内容"></el-input>
      </div>
      <div class="comm-row dis">
        <div class="title title-s">上传类型</div>
        <el-radio-group v-model="uploadType" class="radio-box" @change="hanleChange">
          <el-radio :label="0">图片</el-radio>
          <el-radio :label="1">视频</el-radio>
        </el-radio-group>
      </div>
      <!--  图片素材 -->
      <div class="comm-row-s" v-show="uploadType ===0">
        <div class="title title-s">
          图片素材
          <span class="tips">(最多六张)</span>
        </div>
        <div class="upload-box">
          <div class="img-item"  v-for="(item,index) in addForm.imgList" :key="index">
              <img :src="item" class="upload-img" />
              <div class="delete-box" @click="hanleDelPhoto(index)">
                  <i class="el-icon-circle-close"/>
              </div>
          </div>
          <div class="file" >
            <i class="el-icon-plus" style="font-size:32px;font-weight:550" />
            <input type="file" id="photo" @change="chooseImgVideo($event,1)"  accept="image/*"  />
          </div>
        </div>
      </div>
      <!--  视频素材 -->
      <div class="comm-row-s" v-show="uploadType ===1">
        <div class="title title-s">
          视频素材
          <span class="tips">(最多一个)</span>
        </div>
        <div class="upload-box">
          <div class="img-item">
              <video :src="addForm.video" controls="controls" class="upload-img"  v-show="addForm.video">您的浏览器不支持 video 标签。</video>
          </div>
          <div class="file" >
            <i class="el-icon-plus" style="font-size:32px;font-weight:550" />
            <input id="video" type="file" @change="chooseImgVideo($event,2)" accept="video/mp4"/>
          </div>
        </div>
      </div>
      <el-button type="primary" class="sub-btn" @click="sub">提 交</el-button>
    </div>
  </div>
</template>

<script>
import CommHeader from "@/components/circleFriends/CommHeader.vue";
import { setToken } from "@/utils/auth";
import { get,post } from "@/utils/request";
import {isOverSize} from "@/utils/validate";
export default {
  data() {
    return {
      uid:"",
      addForm: {
        text:"",
        imgList:[], //图片
        video:"",//视频
      },
      uploadType:0,//上传类型
      type:1,	//1纯文字、2纯图片、3纯视频、4图文混合、5文字视频混合
    };
  },
  components: {
    CommHeader,
  },
  created(){
    if(this.$route.query.token != undefined){
      setToken(this.$route.query.token);
      localStorage.setItem('uid',this.$route.query.token.uid);//唯一标识
      this.uid=this.$route.query.uid;
      this.getUserInfo();
    }
  },

  methods:{
    //获取用户信息
    getUserInfo(){
      get("user/getInfo",{
        uid:this.uid
      }).then((response)=>{
        if(response.code ==1){
          localStorage.setItem("companyId",response.data.corpid);//公司ID
          localStorage.setItem("headImgurl",response.data.headimgurl);//头像
          localStorage.setItem("nickname",response.data.nickname);//昵称
          localStorage.setItem("phone",response.data.phone);//手机号
          localStorage.setItem("companyName",response.data.companyName);//公司名称
          localStorage.setItem('isAdmin',response.data.isAdmin);//账号类型
        }
      })
    },

    //处理点击单选框
    hanleChange(){
      if(this.uploadType ===0){
        this.addForm.video="";
      }else{
        this.addForm.imgList=[]
      }
    },

    //上传图片
    chooseImgVideo(event){
      var file=event.currentTarget.files[0];
      var formData = new FormData();
      formData.append('file', file);

      if(isOverSize(file.size,2)){
        this.$message.warning("图片大小不能超过2MB");
        return;
      }
      if(this.addForm.imgList>=6){
        this.$message.warning("图片最多上传六张");
        return;
      }
      formData.append('type', 1);

      // post("omMoments/uploadFile",formData).then((response)=>{
      //   console.log(response)
      //   if(response.code ==1){
      //     if(num ===1){
      //       this.addForm.imgList.push(response.data);
      //       document.getElementById('photo').value=null;
      //     }else{
      //       this.addForm.video=response.data;
      //       document.getElementById('video').value=null;
      //     }
      //   }else{
      //     this.$message.error(response.msg);
      //   }
      // })
    },

    //删除图片
    hanleDelPhoto(index){
      this.addForm.imgList.splice(index,1);
    },

    //提交
    sub(){
      if(this.addForm.text ==="" && this.addForm.imgList.length ===0 && this.addForm.video ===""){
        this.$message.warning("请填写或上传朋友圈内容");
        return;
      }
      if(this.addForm.text !=="" && this.addForm.imgList.length ==="" && this.addForm.video ===""){ //文本
        this.type=1;
      }
      if(this.addForm.text ==="" && this.addForm.imgList.length >0 && this.addForm.video ===""){ //纯图片
        this.type=2;
      }
      if(this.addForm.text ==="" && this.addForm.imgList.length ===0 && this.addForm.video !==""){ //纯视频
        this.type=3;
      }
      if(this.addForm.text !=="" && this.addForm.imgList.length >0 && this.addForm.video ===""){ //图文混合
        this.type=4;
      }
      if(this.addForm.text !=="" && this.addForm.imgList.length ===0 && this.addForm.video !==""){ //视频文字混合
        this.type=5;
      }
      post("omMoments/insertMoments",{
        content:JSON.stringify(this.addForm),
        type:this.type
      }).then((response)=>{
        if(response.code ==1){
          this.$message.success("提交成功");
          this.addForm={text:"",imgList:[], video:""};
          this.uploadType=0;
          this.type=1;
        }else{
          this.$message.error(response.msg);
        }
      })
    }
  }

};
</script>

<style lang="scss" scoped>
@import "@/styles/main.scss";
.circle-box {
  padding: 37px 30px;
  .title {
    width: 90px;
    font-size: 14px;
  }
  .title-s {
    padding-top: 8px;
  }
  .comm-row-s {
    display: flex;
    flex-direction: row;
  }
  .dis {
    padding-bottom: 30px;
  }
  .details {
    margin-left: 5px;
  }
  .tips {
    display: block;
    color: #5a7ff7;
  }
  .sub-btn{
      margin: 10px 0 0 90px;
  }
  .radio-box{
    padding-top: 10px;
  }
}
</style>